<template>
  <Row :gutter="15">
    <Col span="3">
      <left-area 
        :jsp="jsp" 
        @update-pos="updatePosition"
      />
    </Col>
    <Col span="21">
      <right-area 
      :jsp="jsp" 
      :flowdata="$route.params.flowdata" 
      :pos="pos"
    />
    </Col>
  </Row>
  <!-- <div class="flowchat">
    <left-area 
      :jsp="jsp" 
      @update-pos="updatePosition"
    />
    <right-area 
      :jsp="jsp" 
      :flowdata="$route.params.flowdata" 
      :pos="pos"
    />
  </div> -->
</template>

<script>
import LeftArea from '@c/flowchat/LeftArea';
import RightArea from '@c/flowchat/RightArea';

export default {
  // name: 'app',
  components: {
    LeftArea,
    RightArea
  },
  data () {
    return {
      jsp: this.$jsplumb.getInstance(),
      pos: [0, 0],
      flowdata: {}
    };
  },
  mounted () {
    //         this.flowdata=this.$route.params.flowdata
    // console.log( this.$route.params.flowdata)
    // console.log( this.flowdata)
  },
  methods: {
    updatePosition (pos) {
      this.pos = pos;
    }
  }
};
</script>

<style>

.flowchat,
.left-area,
.right-area {
  position: relative;
  height: -webkit-fill-available;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  /* font-size: 0; */
}

.left-area,
.right-area {
  /* display: inline-block; */
   /* border: 1px solid #333; */
}

.left-area {
  /* width: 10%; */
}

.right-area {
  /* width: 86%; */
  /* margin-left: 2%; */
  background: -webkit-linear-gradient(top, transparent 19px, #e9eaec 20px),
    -webkit-linear-gradient(left, transparent 19px, #e9eaec 20px);
  background-size: 20px 20px;
}

/* 
  .square {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .rect {
    position: absolute;
    top: 25px;
    width: 100px;
    height: 50px;
    border: 1px solid #333;
    box-sizing: border-box;
  }

  .diamond {
    position: absolute;
    top: 25px;
    width: 100px;
    height: 72px;
    background: #fff url(QQ截图20170609173054.png) 0 0 no-repeat;
    -webkit-background-size: 100px 72px;
    background-size: 100px 72px;
    box-sizing: border-box;
  } */

.jsp-label {
  /* background-color: white;
  padding: 0.4em;
  font: 12px sans-serif;
  color: #444;
  z-index: 21;
  border: 1px dotted gray;
  opacity: 0.8;
  cursor: pointer; */
}

/* .jsp-label.jtk-hover {
  background-color: #5c96bc;
  color: white;
  border: 1px solid white;
} */
</style>
